<template>
    <div class="div-all">
        <div class="div-up flex">

            <div class="lunbo-div">
                <ul class="carousel-container">
                    <li v-for="(item,index) in detail.previewImgs" :key="index">
                        <img :src="item">
                    </li>
            </ul>
                <ul class="carousel-indexGroup">
                </ul>
            </div>
            <div class="discript-all">
                <div class="food-name"><h2>{{detail.name}}</h2></div>
                <div class="discript">{{detail.describe}}</div>
                <div class="span-tag flex">
                    <span v-for="item in detail.tags" :key="item">{{item}}</span>
                </div>
            </div>
            <div class="bt modify"><span>编辑</span></div>
            <div class="bt back" @click="goBack()"><span>返回</span></div>

        </div>
        <div class="div-down">
            <div class="but-tag down-child">
                <button class="child-but" v-for="(item,index) in detail.recipes.list" :key="item.name" @click="recipeChange(index)">{{item.name}}</button>
            </div>
            <div class="food down-child">
                <h3>所需食材</h3>
<!--                <h4>材料</h4>-->
                <!-- 这里破例使用index作为key，是因为item.name存在重复 -->
                <textarea> 材料：{{cailiao}} </textarea>
                <textarea> 食物：{{foods}} </textarea>
<!--                <p><span v-for="(item,index) in recipes.ingredients" :key="index">-->
<!--                    <span v-if="item.type === 0">{{item.name}},</span>-->
<!--                </span></p>-->
            </div>
            <div class="progress-detail down-child">
                <h3>详细做法</h3>
                <div v-html="recipeText"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import "../assets/plugins/carousel/index.css"
    import {Carousel} from "../assets/plugins/carousel/index"

    export default {
        name: "FoodRecipeDetail",
        data(){
            return{
                //详细数据，该数据由接口而来
                detail:{
                    //预览图
                    previewImgs:[
                        require("../assets/images/test/qlbc1.jpg"),            //文件路径必须用require()引着，不然webpack编译时识别不到该路径
                        require("../assets/images/test/qlbc2.jpeg"),
                        require("../assets/images/test/qlbc3.jpeg"),
                    ],
                    //菜名
                    name:"乾隆白菜",
                    //描述
                    describe:"乾隆白菜好,有多好呢,非常好,有多非常好呢,非常非常非常好，乾隆白菜好,有多好呢,非常好,有多非常好呢,非常非常非常好。",
                    //标签
                    tags:["酸辣","香甜","清淡"],
                    //系列做法
                    recipes:{
                        list:[
                            {
                                name:"做法一",
                                ingredients:[
                                    {name:"花生油",type:0},
                                    {name:"盐巴",type:0},
                                    {name:"鸡精",type:0},
                                    {name:"生抽",type:0},
                                    {name:"陈醋",type:0},
                                    {name:"花椒",type:0},
                                    {name:"大料",type:0},
                                    {name:"1番茄",type:1},
                                    {name:"1黄瓜",type:1},
                                    {name:"1土豆",type:1},
                                    {name:"胡萝卜",type:1},
                                    {name:"1木耳",type:1},
                                    {name:"1鸡蛋",type:1},
                                    {name:"1番茄",type:1},
                                    {name:"1黄瓜",type:1},
                                    {name:"1土豆",type:1},
                                    {name:"1胡萝卜",type:1},
                                    {name:"1木耳",type:1},
                                    {name:"1鸡蛋",type:1},
                                ],
                                //做法（图文模式）
                                recipeText:[
                                    {type:0,data:"第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落"},
                                    {type:0,data:"第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落"},
                                    {type:1,data:"xxxxxx"},
                                    {type:0,data:"第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落"},
                                ]
                            },
                            {
                                name:"做法二",
                                ingredients:[
                                    {name:"2花生油",type:0},
                                    {name:"2盐巴",type:0},
                                    {name:"2鸡精",type:0},
                                    {name:"生抽",type:0},
                                    {name:"陈醋",type:0},
                                    {name:"花椒",type:0},
                                    {name:"大料",type:0},
                                    {name:"番茄",type:1},
                                    {name:"黄瓜",type:1},
                                    {name:"土豆",type:1},
                                    {name:"胡萝卜",type:1},
                                    {name:"木耳",type:1},
                                    {name:"鸡蛋",type:1},
                                    {name:"番茄",type:1},
                                    {name:"黄瓜",type:1},
                                    {name:"土豆",type:1},
                                    {name:"胡萝卜",type:1},
                                    {name:"木耳",type:1},
                                    {name:"鸡蛋",type:1},
                                ],
                                //做法（图文模式）
                                recipeText:[
                                    {type:0,data:"2第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落第一段落"},
                                    {type:0,data:"2第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落第二段落"},
                                    {type:1,data:"xxxxxx"},
                                    {type:0,data:"2第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落第三段落"},
                                ]
                            }
                        ],
                        activeIndex:0,
                    }
                },

                // 轮播图数据整合到做法中了
                carousel:{
                    data:[
                        {}
                    ],
                    obj:null,
                },

                tagButton: null


            }
        },
        computed:{
            recipes(){
                return this.detail.recipes.list[this.detail.recipes.activeIndex]
            },
            cailiao(){
              //遍历  this.detail.recipes.list[this.detail.recipes.activeIndex].ingredients , 返回type===0的即可，然后使用该计算属性
              //   let cl = this.detail.recipes.list[this.detail.recipes.activeIndex].ingredients;
              //   let ss = "";
              //   for(let i=0;i<cl.length;i++){
              //       if (cl[i].type === 0){
              //           ss = ss + cl[i].name + " ";
              //       }
              //   }
              //   console.log("ssssss:",ss);
              //   return ss;
                return this.getFoods(0);
            },
            foods(){
                return this.getFoods(1);
            },
            recipeText(){
                let html = ''
                this.recipes.recipeText.map(item=>{
                    if(item.type == 0){
                        html += `<p>${item.data}</p>`
                    }
                    if(item.type == 1){
                        html += `<img src="" />`
                    }
                })
                return html
            }
        },
        methods:{
            // 初始化
            init(){
                this.tagButton = document.getElementsByClassName("child-but");
                // 轮播图初始化
                this.initCarousel();
                //初始化页签按钮样式
                Array.from(this.tagButton).map(dom=>{dom.style.borderBottom = "solid 2px white";})
                this.tagButton[this.detail.recipes.activeIndex].style.borderBottom = "solid 2px blue";
            },

            // 轮播图初始化
            initCarousel(){
                this.carousel.obj = new Carousel();
                this.carousel.obj.init();
            },

            //切换做法和页签按钮样式
            recipeChange(index){
                this.detail.recipes.activeIndex = index;
                Array.from(this.tagButton).map(dom=>{dom.style.borderBottom = "solid 2px white";})
                this.tagButton[index].style.borderBottom = "solid 2px blue";
            },

            getFoods(foodFlag){
                let cl = this.detail.recipes.list[this.detail.recipes.activeIndex].ingredients;
                let ss = "";  //材料
                let tt = "";  //食物
                for(let i=0;i<cl.length;i++){
                    if (cl[i].type === 0){
                        ss = ss + cl[i].name + " ";
                    }else {
                        tt = tt + cl[i].name + " ";
                    }
                }
                console.log("ssssss:",ss);
                console.log("tttttt:",tt);
                if (foodFlag === 0){
                    return ss;
                }else {
                    return tt;
                }

            },

            goBack() {
                window.history.back();  //返回上一个页面
            },

        },

        //DOM渲染后执行
        mounted() {
            this.init();
        },

        //离开页面时出发该函数
        // beforeDestroy() {
        //     this.carousel.obj.destroy();
        // },
    }
</script>

<style scoped>

    .flex {
        display: flex;
        align-items: center;
    }

    .div-all {
        background-color: #f6f6f8;
    }

    .div-up {
        width: 100%;
        height: 300px;
        /*background-color: #d3e0e3;*/
        position: relative;
    }

    .div-down {
        width: 96%;
        height: 500px;
        /*background-color: #8b9ea3;*/
        margin: 2% 2%;
    }

    .lunbo-div {
        width: 500px;
        height: 270px;
        border: solid 1px #5e4646;
        background-color: #c2b6b6;
        margin: auto 50px;
        overflow: hidden;
        position: relative;
    }

    /*.lunbo-div .carousel-container {*/
    /*    width: 500px;*/
    /*    height: 270px;*/
    /*}*/

    /*.lunbo-div .carousel-container li {*/
    /*    width: 500px;*/
    /*    height: 270px;*/
    /*}*/

    .lunbo-div img {
        width: 100%;
        height: 100%;
    }

    .discript-all {
        width: 50% ;
        height: 88%;
        background-color: #ece6e6;
        margin: auto 20px;
    }

    .discript-all .food-name {
        width: 100%;
        height: 20%;
        position: relative;
    }

    .food-name h2 {
        position: absolute;
        /*left: 50%;*/
        transform: translateX(20%);
        margin-top: 15px;
        font-size: 20px;
        color: #000;
    }

    .discript-all .discript {
        width: 90%;
        height: 55%;
        /*background-color: #7e95a7;*/
        margin-left: 20px;
        margin-top: 20px;
    }

    .discript-all .span-tag {
        width: 100%;
        height: 15%;
        /*background-color: #faf5fc;*/
        /*margin-left: 20px;*/
        margin-top: 10px;
        align-items: center;   /*使其内部元素垂直居中*/
        border-top: solid 1px lightgrey;
    }

    .span-tag span {
        display: block;
        width: 8%;
        height: 70%;
        margin-left: 10px;
        background-color: yellow;
        border: solid 1px #b6b662;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;  /*鼠标停留变小手*/
    }

    .but-tag {
        width: 16%;
        height: 10%;
        background-color: #c17777;
    }

    .food {
        width: 96%;
        height: 35%;
        /*background-color: #e8db9d;*/
        border: solid 1px black;
    }

    .progress-detail {
        width: 96%;
        height: 55%;
        border: solid 1px black;
        /*background-color: #ad8888;*/
    }

    .but-tag button {
        width: 50%;
        height: 100%;
        border: 2px;
        cursor: pointer;  /*鼠标停留变小手*/
        background-color: #f6f1e3;
        font-size: 15px;
    }

    .bt {
        width: 70px;
        height: 40px;
        transform: translateY(-100px);
        margin: 0 10px;
        background-color: dodgerblue;
        border-radius: 15px;
        border: solid 1px #764a9e;
        text-align: center;
        color: #ddffff;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;  /*鼠标停留变小手*/
    }

    .bt:hover {
        border: solid 1px #beb1c9;
    }

    .div-down h3 {
        margin: 10px;
    }

    .div-down p {
        margin-left: 20px;
    }

    .down-child textarea {
        font-size: 15px;
    }

    .down-child textarea {
        border: none;
        outline: none;
        display: block;
        width: 100%;
        height: 30%;
        user-select: none;   /*设置不可编辑不生效???????????*/

    }

</style>